<template>
  <a-modal
    class="shareModel-container"
    title="分享模型"
    :visible="visible"
    width="60%"
    :footer="null"
    @cancel="handelCancel"
  >
    <div
      v-loading="loadingState.isUuid"
      class="body-wrapper"
    >
      <div class="left-wrapper">
        <div class="time-wrapper mb20">
          <div class="title-label mb10">
            分享有效期：
          </div>
          <a-radio-group
            v-model="expireTime"
            :options="timeList"
            @change="handleTimeChange"
          />
        </div>
        <div class="link-wrapper">
          <div class="title-label mb10">
            分享链接：
          </div>
          <div class="link-content">
            {{ shareLink }}
          </div>
        </div>
      </div>
      <div class="right-wrapper">
        <div
          v-if="uuid"
          class="code-wrapper"
        >
          <VueQrcode
            :value="shareLink"
            :options="{ width: 150, margin: 0 }"
          />
          <div class="code-tips">
            扫描二维码，点击QQ或者微信右上角...分享
          </div>
        </div>
        <a-empty
          v-else
          class="code-wrapper"
        />
      </div>
    </div>
    <div class="footer-wrapper">
      <a-button
        v-clipboard:copy="shareLink"
        v-clipboard:success="copySucess"
        v-clipboard:error="copyError"
        type="primary"
      >
        复制链接
      </a-button>
    </div>
  </a-modal>
</template>
<script>
import VueQrcode from '@chenfengyuan/vue-qrcode'
import { Empty } from 'ant-design-vue'
import { getShareUuid } from '@/api/bimIntegrate/business.js'

export default {
  name: 'ShareModel',
  components: {
    VueQrcode,
    AEmpty: Empty
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    modelList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      loadingState: {
        isUuid: false
      },
      expireTime: '',
      uuid: '',
      timeList: [
        {
          value: 'VALIDITY_1',
          label: '1天'
        },
        {
          value: 'VALIDITY_7',
          label: '7天'
        },
        {
          value: 'VALIDITY_15',
          label: '15天'
        },
        {
          value: 'VALIDITY_30',
          label: '30天'
        },
        {
          value: 'VALIDITY_EIKY',
          label: '永久'
        }
      ]
    }
  },
  computed: {
    shareLink() {
      if (!this.uuid) {
        return '选择有效期，生成分享链接'
      }
      const searchQuery = encodeURIComponent(`modelList=${JSON.stringify(this.modelList)}&uuid=${this.uuid}`)
      const url = window.location.origin + '/bimSharePreview?' + searchQuery
      return url
    }
  },
  methods: {
    async getExpireTimeUuid() {
      try {
        if (this.loadingState.isUuid) return
        this.loadingState.isUuid = true
        const params = {
          validityEnum: this.expireTime
        }
        const res = await getShareUuid(params)
        this.uuid = res.data || ''
      } catch (e) {
        console.error(e)
      }
      this.loadingState.isUuid = false
    },
    handleTimeChange() {
      this.getExpireTimeUuid()
    },
    copySucess() {
      if(!this.uuid) {
        this.$message.warning('请选择分享有效期，生成链接后再复制')
        return
      }
      this.$message.success('复制成功')
    },
    copyError() {
      this.$message.error('复制失败')
    },
    handelCancel() {
      this.uuid = ''
      this.expireTime = ''
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="less" scoped>
.body-wrapper {
  display: flex;
  .left-wrapper {
    flex: 1;
  }
  .right-wrapper {
    margin-left: 20px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.footer-wrapper {
  padding-top: 20px;
  display: flex;
  justify-content: center;
}
.link-content {
  border: 1px solid #cccccc;
  border-radius: 4px;
  height: 200px;
  padding: 10px;
  word-break: break-all;
}
.code-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.code-tips {
  width: 150px;
  padding-top: 10px;
  word-break: break-all;
}
</style>